<template>
  <div class="content">
    <!-- 树控件 -->
    <div class="custom-tree-container">
      <el-tree
        :data="treeList"
        :props="defaultProps"
        node-key="id"
        default-expand-all
        expand-on-click-node
      >
        <template #default="{ node, data }">
          <img :src="node.data.picUrl" class="treeImg" v-if="data.level=='2' && node.data.picUrl" />
          <span class="custom-tree-node">
            <span>{{ node.label }}</span>
            <el-tag type="danger" v-if="data.level==0">一级</el-tag>
            <el-tag type="warning" v-if="data.level==1">二级</el-tag>
            <el-tag type="success" v-if="data.level==2">三级</el-tag>
            <span class="rightBut">
              <el-button type="primary" @click="treeAdd(data)" v-if="data.level!=2" round>添加</el-button>
              <el-button type="warning" @click="treeEdit(data)" v-if="data.id !=0" round>编辑</el-button>
              <el-button
                type="danger"
                @click="treeDelete(data)"
                v-if="data.level!=0 && data.id !=0"
                round
              >删除</el-button>
            </span>
          </span>
        </template>
      </el-tree>
    </div>
    <!-- 弹框 -->
    <el-dialog v-model="dialogFormVisible" :title="cateFormTitle">
      <el-form
        ref="ruleFormRef"
        :model="formData"
        label-position="left"
        label-width="auto"
        status-icon
        :rules="rules"
      >
        <el-form-item prop="title" label="类目名称">
          <el-input style="width: 180px" v-model="formData.title" />
        </el-form-item>
        <el-form-item label="类目图片:" prop="picUrl ">
          <el-upload
            class="avatar-uploader"
            action="http://192.168.1.188:8080/upload/admin"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :headers="headers"
          >
            <template v-if="formData.picUrl" #default>
              <img :src="formData.picUrl" class="avatarImg" />
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span>
          <el-button @click="Cancel">取消</el-button>
          <el-button type="primary" @click="onSubmit('ruleFormRef')">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import http from "@/util/http";
import Cookies from "js-cookie";
// 上传图片的相关引用
import { Plus } from "@element-plus/icons-vue";
export default {
  setup() {
    return {
      Plus,
    };
  },
  data() {
    return {
      // 类目数据
      treeList: [],
      // 弹框数据
      formData: {
        title: "", //类目标题
        parentId: "", //类目父节点
        iconUrl: "", //类目图标
        picUrl: "", //类目图片
      },
      //类目级别
      level: "",
      // 编辑的id
      id: "",
      // 请求头令牌----图片要有了令牌才能成功获得到
      headers: { AdminToken: Cookies.get("token") },
      // 弹框的布尔值
      dialogFormVisible: false,
      // 弹框的标题
      cateFormTitle: "",
      defaultProps: {
        children: "childrenList",
        label: "title",
      },
      // 规则
      rules: {
        title: [
          {
            trigger: "blur",
            required: true,
            message: "广告标题不能为空",
          },
        ],
      },
    };
  },
  created() {
    this.treeManag();
  },
  methods: {
    // 点击弹框的确定按钮
    onSubmit(ruleFormRef) {
      this.$refs[ruleFormRef].validate((valid) => {
        if (!valid) {
          ElMessage.warning("表单验证失败!");
        } else {
          if (this.cateFormTitle == "创建") {
            let treeData = {
              _gp: "admin.category",
              _mt: "create",
              title: this.formData.title,
              parentId: this.id,
              picUrl: this.formData.picUrl,
            };
            http.post(treeData).then((res) => {
              if (200 == res.data.errno) {
                ElMessage.success("创建成功");
                this.treeManag();
                this.dialogFormVisible = false;
              }
            });
          } else {
            let treeData = {
              _gp: "admin.category",
              _mt: "update",
              id: this.id,
              title: this.formData.title,
              picUrl: this.formData.picUrl,
              parentId: this.formData.parentId,
            };
            http.post(treeData).then((res) => {
              if (200 == res.data.errno) {
                ElMessage.success("编辑成功");
                this.treeManag();
                this.dialogFormVisible = false;
              }
            });
          }
        }
      });
    },
    // 取消
    Cancel() {
      if ((this.cateFormTitle = "创建")) {
        ElMessage.info("取消创建");
      } else {
        ElMessage.info("取消编辑");
      }
      this.dialogFormVisible = false;
    },
    // 成功上传图片---处理化身成功
    handleAvatarSuccess(res) {
      let { errno, url } = res;
      if (200 == errno) {
        this.$nextTick(() => {
          this.formData.picUrl = url;
        });
      } else {
        ElMessage.warning("图片上传失败");
      }
    },
    // 在上传头像之前
    beforeAvatarUpload() {},
    // 添加
    treeAdd(data) {
      console.log(data, 52525);
      this.formData.title = "";
      this.formData.picUrl = "";
      this.id = data.id; //父亲的id
      this.dialogFormVisible = true;
      this.cateFormTitle = "创建";
    },
    // 编辑
    treeEdit(data) {
      Object.assign(this.formData, data);
      this.id = data.id;
      this.formData.parentId = data.parentId;
      this.dialogFormVisible = true;
      this.cateFormTitle = "编辑";
    },
    // 删除
    treeDelete(data) {
      ElMessageBox.confirm("确定要删除此数据吗?", "注意", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let Data = {
            _gp: "admin.category",
            _mt: "delete",
            id: data.id,
          };
          http.post(Data).then((res) => {
            if (200 == res.data.errno) {
              ElMessage.success("删除成功");
              this.treeManag();
            }
          });
        })
        .catch(() => {
          ElMessage.info("取消删除");
        });
    },
    treeManag() {
      // 类目树请求
      let treeData = {
        _gp: "admin.category",
        _mt: "categoryTree",
      };
      http.post(treeData).then((res) => {
        this.treeList = [
          {
            id: 0,
            title: "全部类目",
            childrenList: res.data.data,
          },
        ];
      });
    },
  },
};
</script>
<style lang="less" scoped>
.content {
  width: 100%;
  // height: 90%;
  box-shadow: #cccccc60 1px 1px 8px 5px;
}
.treeImg{
  width: 40px;
  height: 40px;
}
.custom-tree-container /deep/ .el-tree-node__content {
  padding: 10px 10px;
}
.custom-tree-node {
  flex: 1;
  font-size: 14px;
  padding-right: 8px;
}
// 按钮
.rightBut{
float: right;
}
.avatarImg{
  width: 100%;
  height: 100%;
}

// 弹框的上传图片
.avatar-uploader {
width: 178px;
 height: 178px;
 display: block;
}
.avatar-uploader /deep/ .el-upload {
 width: 100%;
  height: 100%;
 border: 1px dashed var(--el-border-color);
 border-radius: 6px;
 cursor: pointer;
 position: relative;
overflow: hidden;
 transition: var(--el-transition-duration-fast);
}

.avatar-uploader /deep/ .el-upload:hover {
border-color: var(--el-color-primary);
}
</style>
